<template>
  <ul class="song-list">
    <li
      class="item"
      v-for="(song,index) in songs"
      :key="song.id"
      @click="selectItem(song, index)"
    >
      <h2 class="name">{{ song.name }}</h2>
      <p class="desc">{{ getDesc(song) }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'song-list',
  props: {
    songs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    getDesc (song) {
      return `${song.singer}·${song.album}`
    },
    selectItem (song, index) {
      this.$emit('select', { song, index })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  height: 64px;
  flex-direction: column;
  justify-content: center;
  font-size: $font-size-medium;
  .name {
    @include no-wrap();
    padding: 1px;
  }
  .desc {
    @include no-wrap();
    color: $color-text-d;
    padding: 1px;
  }
}
</style>
